<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>卷库管理</el-breadcrumb-item>
      <el-breadcrumb-item>试卷列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row>
        <el-col :span="4">
          <el-select v-model="queryParam.chapterId" clearable @clear="search" @change="search" placeholder="请选择章节">
            <el-option v-for="item in chapters" :key="item.chapterId" :value="item.chapterId" :label="item.chapterName"></el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-table :data="tableData" border fit highlight-current-row style="width: 100%">
        <el-table-column prop="chapterId" label="章节" :formatter="chapterFormatter" width="240px"/>
        <el-table-column prop="examPaperName" label="名称"/>
        <el-table-column prop="questionCount" label="题目数量"/>
        <el-table-column prop="score" label="试卷总分"/>
        <el-table-column prop="limitStartTime" label="开始时间" width="160px"/>
        <el-table-column prop="limitEndTime" label="结束时间" width="160px"/>
        <el-table-column  label="操作" align="center"  width="160px">
          <template slot-scope="{row}">
            <el-button size="mini" @click="$router.push({path: '/exam/edit', query: {id:row.examPaperId}})" >编辑</el-button>
            <el-button size="mini" type="danger" @click="deletePaper(row)" >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="queryParam.pageIndex" :limit.sync="queryParam.pageSize"
                  @pagination="search"/>
    </el-card>
  </div>  
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import examPaperApi from '@/api/examPaper'
import Pagination from '@/components/Pagination'
export default {
  components: { Pagination },
  data () {
    return {
      queryParam: {
        chapterId: null,
        level: null,
        pageIndex: undefined,
        pageSize: undefined
      },
      // 获取到的用户总条数
      total: 0,
      tableData: []
    }
  },
  props: {
    mainLevel: {
      type: Number
    }
  },
  watch: {
    mainLevel() {
      this.pagelist()
    }
  },
  created() {
    this.pagelist()
  },
  methods: {
    pagelist() {
      this.queryParam.chapterId = null
      this.queryParam.level = this.mainLevel
      this.queryParam.pageIndex = this.page.index
      this.queryParam.pageSize = this.page.size
      this.search()
    },
    search() {
      examPaperApi.pageList(this.queryParam).then(data => {
        if (data.code === this.ok.code) {
          this.tableData = data.response.list
          this.total = data.response.total
          this.queryParam.pageIndex = data.response.pageNum
        }
      })
    },
    async deletePaper (row) {
      let _this = this
      // 弹窗询问用户是否删除数据
      const confirmResult = await _this.$confirm(
        '此操作将永久删除该题, 是否继续?', 
        '提示', 
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)

      // 如果用户确认删除，则返回值为字符串 confirm
      // 如果用户取消了删除，则返回值为字符串 cancel
      if (confirmResult !== 'confirm') {
        return _this.$message.info('已取消删除')
      }

      examPaperApi.deletePaper(row.examPaperId).then(re => {
        if (re.code === this.ok.code) {
          _this.search()
          _this.$message.success(re.message)
        } else {
          _this.$message.error(re.message)
        }
      })
      
    },
    chapterFormatter(row, column, cellValue, index) {
      return this.chapterEnumFormat(cellValue)
    },
  },
  computed: {
    ...mapGetters('chapter', [
      'chapterEnumFormat'
    ]),
    ...mapState('chapter', {
      chapters: state => state.chapters
    }),
    ...mapState('page', {
      page: state => state.page
    }),
    ...mapState('resCode', {
      ok: state => state.OK
    }),
  }
}
</script>

<style lang="less" scoped>

</style>